<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            height: 2000px;
        }
        table {
            width: 500px;
            margin: 100px auto;
            border-collapse: collapse;
            text-align: center;
        }

        td,
        th {
            border: 1px solid #333;
        }

        thead tr {
            height: 40px;
            background-color: #ccc;
        }
    </style>
</head>

<body>
    <table cellspacing="0">
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <!-- <a href="javascript:;">asda</a> -->
    <script>
        // 使用js 填充数据
        // 服务器来的  很多行
        // 先取到数据 然后动态 填充进去

        // 1. 拿到数据（模拟数据）
        // 使用对象封装用户

        // var user1 = {
        //     name: '小谢',
        //     subject: 'javascript',
        //     score: 100
        // }

        // 多个学生 ，使用数组存储
        // 准备学生数据
        var users = [{
            name: '小谢',
            subject: 'javascript',
            score: 100
        }, {
            name: '小谢1',
            subject: 'javascript',
            score: 101
        }, {
            name: '小谢2',
            subject: 'javascript',
            score: 102
        }, {
            name: '小谢3',
            subject: 'javascript',
            score: 102
        }, {
            name: '小谢3',
            subject: 'javascript',
            score: 103
        }];

        // 填充数据
        // 往 tbody 里面填充数据 先找到tbody
        var tbody = document.querySelector('tbody');

        // 往tbody里面添加数据  用户数组每有一个对象 就添加一行
        for(var i=0;i<users.length;i++){
            // 数组内每一个对象 都需要创建一行 tr
            var trs=document.createElement('tr');

            for(var k in users[i]){
                // 每一个属性都需要创建一个td
                var tds=document.createElement('td');
                // 对象名[属性名]    对象名 users[i]   属性名[k]
                tds.innerHTML=users[i][k];
                trs.appendChild(tds);
            }
            // 创建一个删除的单元格
            var deleteTd=document.createElement('td');

            // 往td里面添加删除按钮
            // 创建一个新的a标签  添加进单元格内
            var as=document.createElement('a');
            as.innerHTML='删除';

            // a标签必须得又href 属性
            // as.href='#';// 出现问题  会回到页面顶部
            // as.href='###'; // url里面会出现### 号
            as.href='javascript:;'; // 这种写法可以让a标签执行js语句
            
            // 再把a标签添加到deletetd里面
            deleteTd.appendChild(as);

            // 把删除单元格加到tr行内
            trs.appendChild(deleteTd);

            // 不要忘记将每一行加到tbody里面
            tbody.appendChild(trs);
        }

        // 先找到所有得删除a标签
        var deleteAs=document.querySelectorAll('a');
        
        // 循环添加事件
        for(var i1=0;i1<deleteAs.length;i1++){
            deleteAs[i1].onclick=function(){
                // 先拿到a标签 
                // a标签得父元素 td  的父元素 tr就是我们想要删除的
                tbody.removeChild(this.parentNode.parentNode);
            }
        }

    </script>
</body>

</html>